<template>
	<view class="">
		<view class="linefilrer" :style="{position:headerPosition,top:headerTop}">
			<sl-filter :themeColor="themeColor" :menuList="menuList" :isTransNav="true"  @result="result"></sl-filter> 
		</view>
		<!-- 列表 -->
		<view>
			<view class="line-ul">
				<view class="line-list" @click="jumldateils" v-for="(textem,index) in meal" :key="index">
					<image :src="textem.img" class="jiaxl-img"/></image>
					<view class="Price-bt">
						<text>{{textem.telet}}</text>
						<view class="Trip-jt">
							<view class="Praise-lv">{{textem.out}}</view>
							<view class="Trip-dd">销量：{{textem.volume}}</view>
						</view>
						<view class="Trip-jt">
							<view class="Praise-stly">{{textem.days}}</view>
							<view class="Trip-dd">好评率{{textem.praise}}</view>
						</view>
						<view class="Price-jg">
							<view><span class="Price-jg-span">￥</span><span>{{textem.money}}</span></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default{
		components: {
		    slFilter
		},
		data(){
			return{
				headerPosition:"fixed",
				headerTop:"0px",
				themeColor: '#ff4800',
				titleColor:'#333',
	            filterResult: '',
				meal:[
					{
						img:'../../static/images/jiaxl.jpg',
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					},
					{
						img:'../../static/images/hehadj.jpg',
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					}
				],
				menuList:[
					{
					'title': '默认排序',
					'key': 'sads',
					'isMutiple': false,
					'detailList': [{
					            'title': '默认排序',
					            'value': ''
					        },
					        {
					            'title': '离我最近',
					            'value': ' '
					        },
					        {
					            'title': '人气最高',
					            'value': ' '
					        },
					        {
					            'title': '口碑最佳',
					            'value': ' '
					        }
					    ]
					},
					{
					'title': '星级',
					'detailTitle': '请选择星级类型（可多选）',
					'isMutiple': true,
					'key': 'jobType',
					'detailList': [{
	                            'title': '不限',
	                            'value': ''
	                        },
	                        {
	                            'title': '一日游',
	                            'value': ' '
	                        },
	                        {
	                            'title': '两日游',
	                            'value': ' '
	                        },
	                        {
	                            'title': '三日游',
	                            'value': ' '
	                        },
	                        {
	                            'title': '五日游',
	                            'value': ' '
	                        },
	                        {
	                            'title': '七日游',
	                            'value': ' '
	                        }
	                    ]
	                },
					{
	                    'title': '价格',
	                    'key': 'salary',
	                    'isMutiple': true,
	                    'detailTitle': '请选择价格范围（可多选）',
	                    'detailList': [{
	                            'title': '不限',
	                            'value': ''
	                        },
	                        {
	                            'title': '50~200',
	                            'value': ' '
	                        },
	                        {
	                            'title': '200~1000',
	                            'value': ' '
	                        },
	                        {
	                            'title': '1000~3000',
	                            'value': ' '
	                        },
	                        {
	                            'title': '3000以上',
	                            'value': ' '
	                        }
	                    ]
	
	                },
					 {
					    'title': '位置',
					    'key': 'sort',
					    'isSort': true,
					    'detailList': [{
					            'title': '默认排序',
					            'value': ''
					        },
					        {
					            'title': '云岩区',
					            'value': ' '
					        },
					        {
					            'title': '南明区',
					            'value': ' '
					        },
					        {
					            'title': '乌当区',
					            'value': ' '
					        },
							{
							    'title': '花溪区',
							    'value': ' '
							},
							{
							    'title': '白云区',
							    'value': ' '
							},
							{
							    'title': '观山湖区',
							    'value': ' '
							},
							{
							    'title': '贵安新区',
							    'value': ' '
							}
					    ]
					}
					
					
				]
			}
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		methods: {
	        result(val) {
	            console.log('filter_result:' + JSON.stringify(val));
	            this.filterResult = JSON.stringify(val, null, 2)
	        },
			jumldateils:function(){
				uni.navigateTo({
					url:"line-dateils"
				})
			}
	    }
		
	}
</script>

<style>
	@import "../../components/line/line-list";
	@import "../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
	.linefilrer{
		/* position: fixed;
		top: 0px; */
		width: 100%;
		z-index: 99;
	}
</style>
